<template>
	<div class="systemUserPage">
		<div class="strategyMenus">
			<div class="listAdd">
				<wj-Button type="save" @click="userAdd">
					<i class="wj-icon-tianjia"></i>
					新建用户
				</wj-Button>
			</div>
			<div class="strategyMenusSearch">
				<el-input placeholder="请输关键字检索" type="text" v-model="searchValue"></el-input>
			</div>
			<div class="strategyMenusBut">
				<wj-Button type="save" @click="searchEvent">查询</wj-Button>
			</div>
		</div>
		<div class="strategyList">
			<div class="listContent">
				<el-table
					:data="tableData"
					style="width: 100%"
					:default-sort="{ prop: 'loginName', order: 'descending' }"
					:row-class-name="'tableRowClassName'"
				>
					<el-table-column type="index" width="80" label="序号"> </el-table-column>
					<el-table-column prop="loginName" label="用户账号" sortable width="180"> </el-table-column>
					<el-table-column prop="name" label="用户姓名" width="180"> </el-table-column>
					<el-table-column prop="roleName" label="用户角色"> </el-table-column>
					<el-table-column prop="status" label="用户状态">
						<template slot-scope="scope">
							<wj-Button type="save" v-if="scope.row.status == 0">{{ "已启用" }}</wj-Button>
							<wj-Button type="reset" v-if="scope.row.status == 1">{{ "已禁用" }}</wj-Button>
						</template>
					</el-table-column>
					<el-table-column prop="lastLoginTime" label="最后登录日期"> </el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
							<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[9]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——添加 -->
		<AlertBox :alertBoxVisible="alertBoxAddVisible">
			<div class="contentBox contentBoxAddUser_class">
				<div class="contentBox_header">
					<p>添加用户信息</p>
					<i class="wj-icon-guanbi" @click="alertBoxAddclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>登录账号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="userInfoAdd.userAccount" placeholder="请输入登录账号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>登录密码<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input
								type="password"
								v-model="userInfoAdd.userPassword"
								placeholder="请输入登录密码"
								v-validate="'required|pwd'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>确认密码<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input
								type="password"
								v-model="userInfoAdd.userPassword_"
								placeholder="请再次输入密码"
								v-validate="'required|pwd'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>姓名<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="userInfoAdd.userName" placeholder="请输入姓名" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>角色<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="userInfoAdd.userRole" placeholder="请选择角色" @change="handleSelect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
          <div class="infoRow_form" v-if="this.userInfoAdd.userRole === 5">
            <span>手机号<b style="color: rgb(248, 4, 4)">*</b></span>
            <div class="form-item">
              <el-input v-model="userInfoAdd.userPhone" placeholder="请输入用户手机号" v-validate="'required|phone'" clearable  maxlength="11"></el-input>
            </div>
          </div>
					<div class="infoRow_form_textarea">
						<span>描述信息</span>
						<div class="form-textarea">
							<el-input type="textarea" :rows="2" placeholder="请输入描述信息" v-model="userInfoAdd.textarea"> </el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>是否启用</span>
						<div class="form-item">
							<el-switch v-model="userInfoAdd.userState" @change="handleSwitch" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: alertBoxAddConfirm, cls: 'contentBoxAddUser_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——详情 -->
		<AlertBox :alertBoxVisible="alertBoxIssueVisible">
			<div class="contentBox contentBoxDetailsUser_class">
				<div class="contentBox_header">
					<p>编辑用户信息</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>登录账号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="userInfoEdit.userAccount" placeholder="请输入登录账号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>登录密码</span>
						<div class="form-item">
							<el-input
								type="password"
								v-model="userInfoEdit.userPassword"
								placeholder="请输入登录密码"
								v-validate="'pwdornull'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>确认密码</span>
						<div class="form-item">
							<el-input
								type="password"
								v-model="userInfoEdit.userPassword_"
								placeholder="请再次输入密码"
								v-validate="'pwdornull'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>姓名<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="userInfoEdit.userName" placeholder="请输入姓名" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>角色<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="userInfoEdit.userRole" placeholder="请选择角色" @change="handleSelect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
          <div class="infoRow_form" v-if="userInfoEdit.userRole === 5">
            <span>手机号<b style="color: rgb(248, 4, 4)">*</b></span>
            <div class="form-item">
              <el-input v-model="userInfoEdit.userPhone" placeholder="请输入手机号" v-validate="'required'"></el-input>
            </div>
          </div>
					<div class="infoRow_form_textarea">
						<span>描述信息</span>
						<div class="form-textarea">
							<el-input type="textarea" :rows="2" placeholder="请输入描述信息" v-model="userInfoEdit.textarea"> </el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>是否启用</span>
						<div class="form-item">
							<el-switch v-model="userInfoEdit.userState" @change="handleSwitch" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: alertBoxFormConfirm, cls: 'contentBoxDetailsUser_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import {
	system_user_add,
	system_user_delete,
	system_user_all,
	system_user_every,
	system_user_updata,
	system_user_role,
} from "@/utils/request/api.js";
export default {
	name: "SystemUser",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [
				// {
				// 	loginName: "tangsanzang",
				// 	name: "孙悟空",
				// 	roleName: "用户管理员",
				// 	status: "已启用",
				// 	lastLoginTime: "2021-10-31 16:01",
				// },
				// {
				// 	loginName: "tangsanzang",
				// 	name: "孙悟空",
				// 	roleName: "用户管理员",
				// 	status: "已启用",
				// 	lastLoginTime: "2021-10-31 16:01",
				// },
				// {
				// 	loginName: "tangsanzang",
				// 	name: "孙悟空",
				// 	roleName: "用户管理员",
				// 	status: "已启用",
				// 	lastLoginTime: "2021-10-31 16:01",
				// }
			],
			// 自定义弹窗控制——添加
			alertBoxAddVisible: false,
			// 自定义弹窗控制——详情
			alertBoxIssueVisible: false,
			// 下拉数据
			options: [],
			// 添加用户信息
			userInfoAdd: {
				userAccount: "",
				userPassword: "",
				userPassword_: "",
				userName: "",
				userRole: "",
				textarea: "",
        userPhone: "",
				userState: false,
			},
			// 编辑用户信息
			userInfoEdit: {
				userAccount: "",
				userPassword: "",
				userPassword_: "",
				userName: "",
				userRole: "",
        userPhone: "",
				textarea: "",
				userState: false,
			},
			// 更新用户所需id
			userUpdataId: undefined,
		};
	},
	created() {},
	mounted() {
		this.userAllInfo(this.pageNum, this.pageSize);
		this.getRoleAll();
	},
	methods: {
		// 用户添加
		userAdd() {
			this.alertBoxAddVisible = true;
		},
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.userSearchInfo(this.pageNum, this.pageSize, this.searchValue);
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "") {
				this.userSearchInfo(val, this.pageSize, this.searchValue);
			} else {
				this.userAllInfo(val, this.pageSize);
			}
		},
		// 编辑
		handleEdit(index, row) {
			console.log(index, row);
			this.alertBoxIssueVisible = true;
			this.userEveryInfo(row.id);
			this.userUpdataId = row.id;
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			this.userDeleteInfo(row.id);
		},
		// 开关
		handleSwitch(newValue) {
			console.log(newValue);
		},
		// select选项
		handleSelect(value) {
			console.log(value);
		},
		// alertBox——详情 关闭
		alertBoxFormclose() {
			this.alertBoxIssueVisible = false;
		},
		// alertBox——详情 确定
		alertBoxFormConfirm() {
			if (this.userInfoEdit.userPassword !== this.userInfoEdit.userPassword_) {
				this.$msg.warning("两次输入密码不同！");
			} else if (this.userInfoEdit.userRole == "") {
				this.$msg.warning("请选择用户角色！");
			} else {
        const userEditInfo = {
          id: this.userUpdataId,
          loginName: this.userInfoEdit.userAccount,
          password: this.userInfoEdit.userPassword,
          name: this.userInfoEdit.userName,
          status: this.userInfoEdit.userState ? 0 : 1,
          roleId: this.userInfoEdit.userRole,
          note: this.userInfoEdit.textarea,
        };
        if (this.userInfoEdit.userRole === 5) {
          userEditInfo.contact = this.userInfoEdit.userPhone;
        }
				this.userUpdataInfo(userEditInfo);
			}
		},
		// alertBox——添加 关闭
		alertBoxAddclose() {
			this.alertBoxAddVisible = false;
			this.initUserInfoAdd();
		},
		// alertBox——添加 确定
		alertBoxAddConfirm() {
			if (this.userInfoAdd.userPassword !== this.userInfoAdd.userPassword_) {
				this.$msg.warning("两次输入密码不同！");
			} else if (this.userInfoAdd.userRole == "") {
				this.$msg.warning("请选择用户角色！");
			} else {
        const userInfo = {
          loginName: this.userInfoAdd.userAccount,
          password: this.userInfoAdd.userPassword,
          name: this.userInfoAdd.userName,
          status: this.userInfoAdd.userState ? 0 : 1,
          roleId: this.userInfoAdd.userRole,
          note: this.userInfoAdd.textarea,
        }
        if (this.userInfoAdd.userRole === 5) {
          userInfo.contact = this.userInfoAdd.userPhone;
        }
        this.userAddInfo(userInfo);
      }
		},
		// 初始化userInfoAdd对象（将该对象还原成初始化状态）
		initUserInfoAdd() {
			// 初始化用户信息
			this.userInfoAdd = {
				userAccount: "",
				userPassword: "",
				userPassword_: "",
				userName: "",
				userRole: "",
				textarea: "",
				userState: false,
			};
		},
		// 用户添加——信息提交
		userAddInfo(obj) {
			// 发起请求
			system_user_add(obj).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("用户添加成功！");
					this.initUserInfoAdd();
					this.alertBoxAddVisible = false;
					this.currentPage = 1;
					this.total = 0;
					this.pageSize = 10;
					this.pageNum = 1;
					this.userAllInfo(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("用户添加失败！");
				}
			});
		},
		// 删除单个用户
		userDeleteInfo(id) {
			system_user_delete({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("用户删除成功！");
					this.currentPage = 1;
					this.total = 0;
					this.pageSize = 10;
					this.pageNum = 1;
					this.userAllInfo(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("用户删除失败！");
				}
			});
		},
		// 查询所有用户
		userAllInfo(page, size) {
			system_user_all({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
		// 查询单个用户
		userEveryInfo(id) {
			system_user_every({
				id: id,
			}).then((res) => {
				this.userInfoEdit.userAccount = res.data.loginName;
				this.userInfoEdit.userPassword = res.data.password;
				this.userInfoEdit.userPassword_ = res.data.password;
				this.userInfoEdit.userName = res.data.name;
				this.userInfoEdit.userState = res.data.status == 0 ? true : false;
				this.userInfoEdit.userRole = res.data.roleId;
				this.userInfoEdit.textarea = res.data.note;
        if (this.userInfoEdit.userRole === 5) {
          this.userInfoEdit.userPhone = res.data.contact;
        }
			});
		},
		// 更新单个用户
		userUpdataInfo(obj) {
			system_user_updata(obj).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("用户修改成功！");
					this.alertBoxIssueVisible = false;
					this.currentPage = 1;
					this.total = 0;
					this.pageSize = 10;
					this.pageNum = 1;
					this.userAllInfo(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("用户修改失败！");
				}
			});
		},
		// 搜索用户
		userSearchInfo(page, size, value) {
			system_user_all({
				page: page,
				size: size,
				keyword: value,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
		// 查询所有角色
		getRoleAll() {
			system_user_role().then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						this.options.push({
							label: item.role_name,
							value: item.id,
						});
					});
				} else {
					this.$msg.error("获取角色失败！");
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.systemUserPage {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.listAdd {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 12px 18px;
			}
		}
		.strategyMenusBut {
			width: 5%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 12px 18px;
				margin: 0 12px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 28px 0;
		box-sizing: border-box;

		.listContent {
			width: 100%;
			height: 100%;
			/deep/ .el-table {
				border-left: 1px solid #ebeef5;
				border-right: 1px solid #ebeef5;
				border-top: 1px solid #ebeef5;
			}
			/deep/ .el-link {
				margin: 0 12px 0 0;
			}
			/deep/ .el-table th.el-table__cell {
				background: #ebeef5;
				font-size: 15px;
			}
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
			}
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
